<docs>
  ## 层级选择插件
  ## props
  * value v-model 选中的值  $.emit('input')
  * list 传入的列表
  * visible 控制显隐
  * pack 完整的选择数据包
  * level 层级
  ## event
  * input
  * upadte:pack
  * itemClick item点击事件
</docs>
<template>
  <transition name="slide">
    <div class="level" v-show="visible" @click="hideCover">
      <div class="wrap" @click.stop>
        <div class="title-wrap">
          <div class="title">{{title}}</div>
          <i class="iconfont icon-close" @click="hideCover"></i>
        </div>
        <ul class="content">
          <li v-for="(item, index) in list"
          @click="addressClick(item)" :class="classSet(item)"
          :key="index">
            <div class="con-item-text">{{item.dmmc}}</div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'levelPlugin',
  props: {
    title: {
      type: String
    },
    list: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      required: true
    },
    pack: {
      type: Object
    },
    level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
    };
  },
  watch: {
  },
  methods: {
    // 地址点击，选中
    addressClick(item) {
      this.$emit('input', item.dmid);
      this.$emit('update:pack', item);
      this.$emit('itemClick');
      this.hideCover();
    },
    // 设置样式类
    classSet(item) {
      let className;
      if (this.level === 1) {
        className = item.dmmc.length > 5 ? 'con-item-66' : 'con-item-33';
      } else {
        className = 'con-item-5';
      }
      return item.dmid === this.value ? `${className} active` : className;
    },
    // 隐藏弹出层
    hideCover() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped lang="scss">
@import '~common/scss/variable.scss';
  $item-margin: 15px;
  .level {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: all ease-in-out .4s;
    &.slide-enter {
      opacity: 0;
      .wrap {
        transform: translateY(50%);
        opacity: 0;
      }
    }
    &.slide-enter-active {
      opacity: 1;
    }
    &.slide-leave-active {
      opacity: 0;
      .wrap {
        transition: all ease-in-out .15s;
        transform: translateY(50%);
        opacity: 0;
      }
    }
    .wrap {
      transition: all ease-in-out .2s;
      width: 100%;
      position: fixed;
      // display: flex;
      // flex-direction: column;
      bottom: 0;
      height: 900px;
      z-index: 1001;
      background-color: #fff;
    }
    .title {
      text-align: center;
      padding: $padding-base;
      font-size: $font-size-base;
      color: $color-text-label;
      line-height: 1;
      border-bottom: $border;
    }
    .iconfont {
      font-size: $font-size-large;
      position: absolute;
      right: $margin-base;
      top: $margin-base;
    }
    .content {
      height: 720px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      padding: $padding-base - $item-margin;
      padding-bottom: 18px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .active {
      .con-item-text {
        background-color: #e8edf4;
      }
    }
    .con-item-33 {
      flex: 0 0 33.3333333%;
      box-sizing: border-box;
      padding: $item-margin;
      height: 120px;
    }
    .con-item-text{
      color: $color-text-title;
      font-size: $font-size-small;
      line-height: 1;
      text-align: center;
      border-radius: 10px;
      border: $border;
      // box-shadow: inset 0px -1px 1px -1px $color-border;
      // box-shadow:  0 0 1px $color-border;
      border-color: $color-text-label;
      padding: 26px  0;
    }
    .con-item-66 {
      flex: 0 0 66.666666%;
      height: 120px;
      box-sizing: border-box;
      padding: $item-margin;
    }
    .con-item-5 {
      flex: 0 0 50%;
      height: 120px;
      box-sizing: border-box;
      padding: $item-margin;
    }
  }
</style>
